<template>
    <el-form  :model="blogForm">
        <el-row>
        <el-col :span="16">
        <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="blogForm.title"></el-input>
        </el-form-item>

            <el-form-item label="文章预览内容" :label-width="formLabelWidth">
                <el-input v-model="blogForm.slug"></el-input>
            </el-form-item>

        </el-col>
         <el-col :span="8">
            <el-form-item label="文章缩略图url" :label-width="formLabelWidth">
                <el-input v-model="blogForm.imgUrl"></el-input>
            </el-form-item>
        </el-col>

            </el-row>


        <el-row>
            <el-col :span="6.5">
                <el-form-item label="分类" :label-width="formLabelWidth" prop="blogSortUid">
                    <el-select
                            clearable
                            v-model="blogForm.sortMid"
                            size="small"
                            placeholder="请选择"
                            style="width:150px"
                    >
                        <el-option
                                v-for="item in sorts.sort"
                                :key="item.mid"
                                :label="item.name"
                                :value="item.mid"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6.5">
                <el-form-item label="标签" label-width="80px">
                    <el-select
                            clearable
                            v-model="blogForm.tagMid"
                            multiple
                            size="small"
                            placeholder="请选择"
                            style="width:210px"
                            filterable
                    >
                        <el-option
                                v-for="item in tags.tag"
                                :key="item.mid"
                                :label="item.name"
                                :value="item.mid"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6.5">
                <el-form-item v-model="blogForm.allowComment" label="文章评论" :label-width="formLabelWidth" >
                    <el-radio border size="small" v-model="blogForm.allowComment" label="1">开启</el-radio>
                    <el-radio border size="small" v-model="blogForm.allowComment" label="0">关闭</el-radio>
                </el-form-item>
            </el-col>

            <el-col :span="4.5">
                <el-form-item v-model="blogForm.status" label="是否发布" :label-width="lineLabelWidth" >
                        <el-radio  border size="small" v-model="blogForm.status" label="1">发布</el-radio>
                        <el-radio border size="small" v-model="blogForm.status" label="0">草稿</el-radio>
                </el-form-item>

            </el-col>
            <el-col :span="4.5">
            <el-form-item :label-width="formLabelWidth">
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </el-form-item>
            </el-col>
        </el-row>
    <v-md-editor v-model="blogForm.text" height="850px"></v-md-editor>
    </el-form>
</template>

<script>
    import {ref,reactive} from 'vue';
    import {addArticle} from "@/api/blogedit"
    import {getBlogSort }from "@/api/blogsort"
    import { ElMessage } from 'element-plus'
    export default {
        name: "添加博客",
        setup(){
            const text = ref('');
            const formLabelWidth =ref('120px');
            const lineLabelWidth =ref('120px');
            const blogForm=reactive({
                title:'', slug:'',text:'',imgUrl:'',allowComment:'',status:'',uid:'',tagMid:'',sortMid:''
            });

            //提交表单
            function submitForm() {
                blogForm.uid="1366271951425896454";
                addArticle(blogForm).then(res=>{
                    console.log(blogForm)
                    const data=res.data.success;
                    if (data){
                        blogForm.title='';
                        blogForm.slug='';
                        blogForm.text='';
                        blogForm.imgUrl='';
                        blogForm.allowComment='';
                        blogForm.status='';
                        blogForm.tagMid='';
                        ElMessage.success({
                            message: '添加成功',
                            type: 'success'
                        });
                    }else {
                        ElMessage.error('添加失败');
                    }
                    console.log(data);
                })



            }
            //获取标签
            const queryTag=reactive({
                type:'1',
            });
            const tags=reactive({tag:[]})
                getBlogSort(queryTag).then(res=>{
                    tags.tag=res.data.data;

                });

            //获取分类
            const querySort =reactive({
                type:'0',
            });
            const sorts=reactive({ sort:[]})
            getBlogSort(querySort).then(res=>{
                sorts.sort=res.data.data;
            });
            return {text,formLabelWidth,lineLabelWidth,blogForm,submitForm,tags,sorts}
        }

    }
</script>

<style scoped>

</style>